<template>
  <div class="about">
    <div id="containerAbout"></div>
  </div>
</template>

<script>
import * as THREE from 'three';
import "three/examples/js/controls/OrbitControls"
// 引入obj模型加载库OBJLoader.js
import "three/examples/js/loaders/OBJLoader.js"
//引入obj模型材质加载库MTLLoader.js
import "three/examples/js/loaders/MTLLoader.js"
var scene = new THREE.Scene();
export default {
  name: 'About',
  data(){
    return{
      container:'',
      renderer: '', // 渲染器
      camera: '', // 相机
      scene: '', // 场景
      point: '', // 光线
      mesh: '', // 网格
      width:1920,
      height:937
    }
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    init(){
      this.initScene();
      this.initCamera();
      this.initModel();
      this.initLight();
      this.initRender();
    },
    /**
     * 初始化场景
     */
    initScene () {
      this.scene = new THREE.Scene()
    },
    /**
     * 初始化相机
     */
    initCamera(){
      this.container = document.getElementById("containerAbout");
      // var width = 1920; //窗口宽度
      // var height = 937; //窗口高度
      var k = this.width / this.height; //窗口宽高比
      var s = 18; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      this.camera.position.set(-100, 300, 200); //设置相机位置
      this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
    },
    /**
     * 初始化模型
     */
    initModel(){
      var _this=this;
      /*** OBJ和材质文件mtl加载*/
      var OBJLoader = new THREE.OBJLoader();//obj加载器
      var MTLLoader = new THREE.MTLLoader();//材质文件加载器
      MTLLoader.load('static/model/pipeline.mtl', function (materials) {
        // 返回一个包含材质的对象MaterialCreator
        //console.log(materials);
        //obj的模型会和MaterialCreator包含的材质对应起来
        OBJLoader.setMaterials(materials);
        OBJLoader.load('static/model/pipeline.obj', function (obj) {
          _this.scene.add(obj);//返回的组对象插入场景中
          //obj.scale.set(10, 10, 10); //放大obj组对象
          obj.position.set(-100, 175, 200); //模型位置
        })
      })
      //加载另一个模型
      MTLLoader.load('static/model/axle.mtl', function (materials) {
        // 返回一个包含材质的对象MaterialCreator
        //console.log(materials);
        //obj的模型会和MaterialCreator包含的材质对应起来
        OBJLoader.setMaterials(materials);
        OBJLoader.load('static/model/axle.obj', function (obj) {
          _this.scene.add(obj);//返回的组对象插入场景中
          obj.position.set(-100, 175, 200); //模型位置
        })
      })
    },
    /**
     * 初始化光源
     */
    initLight(){
      //点光源
      this.point = new THREE.PointLight(0xffffff);
      this.point.position.set(400, 200, 300); //点光源位置
      this.scene.add(this.point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      this.scene.add(ambient);
    },
    /**
     * 初始化渲染器
     */
    initRender(){
      var _this=this;
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(this.width, this.height);//设置渲染区域尺寸
      this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      this.container.appendChild(this.renderer.domElement); //body元素中插入canvas对象
      //自定义渲染 --- 均匀旋转
      let T0 = new Date();//上次时间
      function render() {
        let T1 = new Date();//本次时间
        let t = T1-T0;//时间差
        T0 = T1;//把本次时间赋值给上次时间
        requestAnimationFrame(render);
        _this.renderer.render(_this.scene,_this.camera);//执行渲染操作
      }
      render();
      // 鼠标操作3D模型
      var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);//创建控件对象
      //监听模型点击事件
      window.addEventListener( 'click', this.onMouseClick, false );
    },
    //模型点击事件
    onMouseClick(event) {
      var raycaster = new THREE.Raycaster()
      var mouse = new THREE.Vector2()
      //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1
      mouse.y = (event.clientY / window.innerHeight) * 2 + 1
      console.log("mouse",mouse);
      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
      raycaster.setFromCamera(mouse, this.camera);
      // 获取raycaster直线和所有模型相交的数组集合
      var intersects = raycaster.intersectObjects(scene.children);
      console.log(intersects);
      //将所有的相交的模型的颜色设置为红色
      for ( var i = 0; i < intersects.length; i++ ) {
        intersects[i].object.material.color.set(0xff0000);
      }
    }

  }
}
</script>
